<script setup>
import {onMounted, ref, watch} from "vue";
import {Refresh, Search} from "@element-plus/icons-vue";
import { loginLoginPageList } from '@/api/system/log.js'

defineOptions({
  name: '/system/log/login'
})

//搜索对象
const search = ref({
  loginName: "",
  status: "",
  startDate: "",
  endDate: "",
  dateRange: "",
  pageNum: 1,
  pageSize: 10,
  total: 0,
})

watch(() => search.value.dateRange, (newVal) => {
  if (newVal instanceof Array && newVal.length > 0) {
    search.value.startDate = newVal[0]
    search.value.endDate = newVal[1]
  } else {
    search.value.startDate = ""
    search.value.endDate = ""
  }
})

//搜索表单实例
const searchFormRef = ref(null)

//分页请求
const requestPageList = () => {
  let query = {...search.value}
  query.dateRange = ''
  loginLoginPageList(query).then(resp => {
    search.value.total = Number(resp.data.total)
    loginData.value = resp.data.data
  })
}

onMounted(() => {
  requestPageList()
})

//登陆状态
const loginStatusEnum = ref([
  {label: "成功", value: 1},
  {label: "失败", value: 2},
])

//分页对象
const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
})

//登陆日志集合
const loginData = ref([])

//监听搜索表单重置事件
const onReset = () => {
  search.value.pageNum = 1
  searchFormRef.value.resetFields()
  search.value.startDate  = ''
  search.value.endDate = ''
  requestPageList()
}

//监听搜索表单搜索事件
const onSearch = () => {
  requestPageList()
}

//处理当前页改变事件
const handleCurrentChange = (currentPage) => {
  pagination.value.pageNum = currentPage
  requestPageList()
}
</script>

<template>
<div class="cb-main-container">
  <div class="cb-common-box search-box">
    <el-form inline :model="search" ref="searchFormRef" size="large">
      <el-form-item prop="loginName" label="登陆名">
        <el-input v-model="search.loginName" placeholder="请输入登陆名称" />
      </el-form-item>
      <el-form-item prop="status" label="状态">
        <el-select v-model="search.status" placeholder="请输入登陆状态" style="width:210px">
          <el-option v-for="(item, index) in loginStatusEnum" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="dateRange" label="日期">
        <el-date-picker
            v-model="search.dateRange"
            type="daterange"
            range-separator="到"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button icon="Refresh" @click="onReset">重置</el-button>
        <el-button type="primary" icon="Search" @click="onSearch">搜素</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="main-box cb-common-box">
    <el-table :data="loginData" class="cb-table-box" size="large" empty-text="暂无数据">
      <el-table-column type="index" width="50" />
      <el-table-column property="loginName" label="登陆名" />
      <el-table-column property="loginIp" label="IP地址" />
      <el-table-column property="loginRegion" label="区域" />
      <el-table-column property="operatingSystem" label="操作系统" />
      <el-table-column property="agentClient" label="客户端" />
      <el-table-column property="status" label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.status === 1 ? 'primary' : 'info'">{{ scope.row.status === 1 ? '成功' : '失败' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column property="message" label="响应信息" show-overflow-tooltip />
      <el-table-column property="createTime" label="创建时间" />
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="pagination.total" :current-page="search.pageNum" style="margin-top: 16px" @current-change="handleCurrentChange" />
  </div>
</div>
</template>

<style scoped lang="scss">
.cb-main-container {
  flex-direction: column;
}
</style>
